<template>
    <div id="app" class="page_bonus">
				<header>
					<!-- <span class="h-time">2018年2月1日-2月12日</span> -->
				</header>
				<section>
						<div class="s-body">
							<div class="s-item s-item-money">
								<span class="s-step">第一步</span>
								<h4>输入投资金额</h4>
								<div class="s-form">
									<input v-model="money" @input="valids" type="number" pattern="[0-9]*" placeholder="金额为1000的整数倍" />
									<div v-show="!valid" class="s-error">{{validTxt}}</div>
								</div>
							</div>
							<div class="s-item s-item-day">
									<span class="s-step">第二步</span>
								<h4>选择投资期限</h4>
								<div class="s-form">
									<div @click="switchDay(28)" v-bind:class="{'s-day-selected':day==28}" class="s-day">≥ 28天</div>
									<div @click="switchDay(90)" v-bind:class="{'s-day-selected':day!=28}" class="s-day">≥ 90天</div>
								</div>
							</div>
							<div class="s-item s-item-btn">
								<div @click="submit" class="s-btn">{{btntxt}}</div>
							</div>
						</div>
						<div class="s-footer">
								本活动领取的优选红包在活动期间有效；<br />优选红包须使用后才能领取下一个红包哦~
						</div>
				</section>
				<footer>
					<h4>活动规则</h4>
					<p>1. 活动期间(2月1日-2月12日)，在活动页面输入投资金额，选择想要的1个优选红包，点击领取，红包将实时发送至“我的-优惠券”，请及时查看使用；</p>
					<p>2. 每位用户每次仅限领取1个优选红包，优选红包须使用后才能领取下一个；</p>
					<p>3. 活动期间领取优选红包个数不设上限，领取的红包在活动期间有效，新手标不可使用优选红包；</p>
					<p>4. 对活动有任何疑问，请拨打客服热线400-156-7657，或联系在线客服。</p>
					<div class="f-footer">
						*在法律允许范围内，优选金融保留对本次活动的最终解释权。<br />
						活动仅成年人可参与，投资有风险，理财需谨慎。<br />
					</div>
				</footer>

				<!-- 奖励弹框 -->
				<div v-if="popup" class="p-box">
						<div class="p-box-mask"></div>
						<div class="p-box-body">
							<div @click="close" class="p-box-close"></div>
							<div class="p-box-paper">
								{{paper}}<i>元</i>
							</div>
							<div class="p-box-term">
									<p>投资条件 ≥ {{money}}元</p>
									<p>投资条件 ≥ {{day}}天</p>
							</div>
							<div @click="GoProductList" class="p-box-btn"></div>
						</div>
				</div>
    </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  props: [],
  data() {
    return {
      countDownTimeOut: null,
      money: "",
      day: 28,
      paper: 888,
      valid: true,
      validTxt: "请输入投资金额",
      popup: false,
      startTime: "",
      endTime: "",
      nowTime: "",
      btntxt: "活动开始还有00：00：00",
      status: 1 // 0——未开始，1已开始，2已结束
    };
  },
  mounted() {
    var self = this;

    var req = this.Axios.get(this.Interface.GetActiveBaseInfo, {
      params: {
        topicId: 5
      }
    });

    req.then(res => {
      var data = res.data;
      if (data.success) {
        var { startTime, endTime, currentTime } = data.data;
        startTime = startTime * 1;
        endTime = endTime * 1;
        currentTime = currentTime * 1;

        if (currentTime < startTime) {
          //  未开始
          self.btntxt = "活动开始还有 00:00:00";
          self.countDowns((startTime - currentTime) / 1000);
          self.status = 0;
        } else if (currentTime >= startTime && currentTime <= endTime) {
          // 活动已结束
          self.btntxt = "领取专属红包";
          self.status = 1;
        } else if (currentTime >= endTime) {
          // 活动已结束
          self.btntxt = "活动已结束";
          self.status = 2;
        }
      } else {
        this.Toast(data.data.message || data.data.error_msg);
      }
    });
  },
  methods: {
    countDowns(time) {
      var self = this;
      var theTime = parseInt(time); // 秒
      var theTime1 = "00"; // 分
      var theTime2 = "00"; // 小时
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
        }
      }

      var result =
        parseInt(theTime) > 9 ? parseInt(theTime) : "0" + parseInt(theTime);
      if (theTime1 > 0) {
        result =
          (parseInt(theTime1) > 9
            ? parseInt(theTime1)
            : "0" + parseInt(theTime1)) +
          ":" +
          result;
      } else {
        result = "00:" + result;
      }
      if (theTime2 > 0) {
        result =
          (parseInt(theTime2) > 9
            ? parseInt(theTime2)
            : "0" + parseInt(theTime2)) +
          ":" +
          result;
      } else {
        result = "00:" + result;
      }
      if (time > 0) {
        self.status = 0;
        self.btntxt = "活动开始还有 " + result;
      } else {
        self.status = 1;
        self.btntxt = "领取专属红包";
        return false;
      }
      console.log(result);
      time--;
      if (self.countDownTimeOut) clearTimeout(self.countDownTimeOut);
      self.countDownTimeOut = setTimeout(function() {
        self.countDowns(time);
      }, 1000);
    },
    switchDay(d) {
      this.day = d;
    },
    close() {
      this.popup = false;
      $("body,html").removeClass("disScroll");
    },
    GoProductList() {
      APP.JumpNavite("jumpToProductList");
    },
    valids() {
      const { money, day, valid, validTxt } = this;

      if (money == "") {
        this.valid = false;
        this.validTxt = "请输入投资金额";
        return false;
      } else {
        this.valid = true;
      }

      if ((money * 1) % 1000 != 0) {
        this.valid = false;
        this.validTxt = "投资金额必须是1000的整数倍";
        return false;
      } else {
        this.valid = true;
      }

      if (money * 1 > 100000) {
        this.valid = false;
        this.validTxt = "投资金额最大不能超过100,000元";
        return false;
      } else {
        this.valid = true;
      }
    },

    submit() {
      var self = this;
      const { money, day, valid, validTxt } = this;
      // 验证
      if (money * 1 <= 0) {
        this.valid = false;
        this.validTxt = "投资金额不能小于0";
        return false;
      }
      // 验证
      if (money == "") {
        this.valid = false;
        this.validTxt = "请输入投资金额";
        return false;
      }

      if ((money * 1) % 1000 != 0) {
        this.valid = false;
        this.validTxt = "投资金额必须是1000的整数倍";
        return false;
      }

      if (money * 1 > 100000) {
        this.valid = false;
        this.validTxt = "投资金额最大不能超过100,000元";
        return false;
      }

      // self.CreateBonus(1);
      // 判断是否登陆
      var UserInfo = APP.getInfo();
      UserInfo.then(res => {
        if (res.uId !== "") {
          self.CreateBonus(res.sessionid);
        } else {
          APP.Login();
          return false;
        }
      });
    },
    CreateBonus() {
      var self = this;
      const { money, day } = this;

      if (self.status != 1) {
        return false;
      }

      // 参数
      const params = {
        amount: money,
        productLimit: day,
        sessionid: arguments[0]
      };
      // 定义请求
      var req = this.Axios.post(this.Interface.GetBonusInfo, params);
      // var $url ="https://mock.mmcai.cn/mock/5a699f4d2b68750fbe1af69d/example/proxy#!method=post";
      // var req = this.Axios.post($url, params);

      // 处理请求
      req.then(res => {
        var result = res.data;
        // alert(JSON.stringify(result));
        if (result.success) {
          var data = result.data;
          var eCode = data.error_msg;
          if (eCode != undefined && eCode != "000000") {
            this.Toast(data.message || data.error_msg);
          } else {
            if (data.isReceive) {
              // this.Toast("你已领取过红包，请使用后再领取哦");

              var msg = MessageBox({
                title: "",
                message: "1",
                showConfirmButton: true,
                showCancelButton: true,
                cancelButtonText: "我知道了",
                confirmButtonText: ""
              });

              msg.then(res => {
                if (res != "cancel") {
                  self.GoProductList();
                }
              });
            } else {
              $("body,html").addClass("disScroll");
              this.paper = data.money;
              this.popup = true;
            }
          }
        } else {
          this.Toast(result.data.message || result.data.error_msg);
        }
      });
    }
  }
};
</script>
<style lang="less">
.disScroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

input::-webkit-input-placeholder {
  color: #b89d9a;
  opacity: 1;
}
.page_bonus {
  width: 100%;
  overflow: hidden;
  background: #d64638 url("../../public/imgs/bonus/img-bonus-bg.png") center -115px
    no-repeat;
  background-size: contain;
  header {
    height: 445px;
    .h-time {
      display: block;
      // color:#fadc91;
      color: #fbdb94;
      text-align: center;
      box-sizing: border-box;
      padding: 284px 0 0 8px;
      font-size: 20px;
      letter-spacing: 0.25em;
    }
  }
  section {
    height: 700px;
    box-sizing: border-box;
    padding: 0 50px;
    .s-body {
      background: #fff7e0;
      border-radius: 15px;
      box-sizing: border-box;
      padding: 20px;
      .s-item {
        position: relative;
        padding: 25px 20px 0;
        .s-step {
          position: absolute;
          left: -20px;
          top: 20px;
          background: #d92423;
          width: 80px;
          height: 30px;
          line-height: 33px;
          text-align: center;
          font-size: 20px;
          color: #fff;
          border-radius: 0 5px 5px 0;
        }
        h4 {
          font-size: 34px;
          color: #572828;
          text-align: center;
          margin-bottom: 25px;
        }
        .s-form {
          position: relative;
          border-bottom: 1px solid #a9845f;
          overflow: hidden;
          box-sizing: border-box;
          padding: 0 0 38px 0;
          input {
            display: block;
            height: 83px;
            width: 100%;
            border: 1px solid #a9845f;
            border-radius: 15px;
            background: #faf3e3;
            box-sizing: border-box;
            text-align: center;
            font-size: 30px;
            color: #572828;
          }
          .s-day {
            width: 198px;
            height: 53px;
            border-radius: 10px;
            border: 1px solid #7a2425;
            background: #faf3e3;
            color: #ce3535;
            font-size: 30px;
            text-align: center;
            line-height: 53px;
            &:first-child {
              margin-right: 65px;
            }
            &.s-day-selected {
              color: #faeb9d;
              background: -webkit-gradient(
                linear,
                0 0,
                0 bottom,
                from(#f98a4e),
                to(#e53020)
              );
            }
          }
          .s-error {
            position: absolute;
            bottom: 12px;
            left: 0px;
            color: #da2623;
            font-size: 24px;
          }
        }
        &.s-item-money {
          background: #fbedcd;
          border-radius: 15px 15px 0 0;
          .s-form {
            padding-bottom: 50px;
          }
        }
        &.s-item-day {
          background: #fbedcd;
          border-radius: 0 0 15px 15px;
          .s-form {
            border: none;
            display: -webkit-box;
            width: 470px;
            height: 100px;
            margin: 0 auto;
            padding-bottom: 45px;
            box-sizing: border-box;
          }
        }
        &.s-item-btn {
          background: url("../../public/imgs/bonus/img-bonus-btn.png") center 0
            no-repeat;
          background-size: 606px 90px;
          width: 100%;
          height: 90px;
          margin: 25px auto 0;
          padding: 0;
          .s-btn {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 90px;
            font-size: 40px;
            color: #f9db91;
          }
        }
      }
    }
    .s-footer {
      background: #b63c30;
      border-radius: 15px;
      text-align: center;
      color: #ffcd93;
      font-size: 22px;
      line-height: 35px;
      box-sizing: border-box;
      padding: 20px 0;
      margin: 25px auto 0;
    }
  }
  footer {
    box-sizing: border-box;
    padding: 30px 30px 80px;
    color: #ffe9c1;
    font-weight: normal;
    font-size: 24px;
    h4 {
      font-size: 28px;
      font-weight: normal;
      margin-bottom: 20px;
    }
    p {
      line-height: 40px;
    }
    .f-footer {
      font-size: 20px;
      color: #ffe9c1;
      margin: 40px 0 0 0;
      line-height: 35px;
    }
  }
  .p-box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .p-box-mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
    }
    .p-box-body {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 900px;
      background: url("../../public/imgs/bonus/img-bonus-pop.png") center 0
        no-repeat;
      background-size: 750px 900px;
      z-index: 2000;
      .p-box-close {
        position: absolute;
        right: 130px;
        top: 101px;
        width: 65px;
        height: 65px;
        background: #fff;
        opacity: 0;
        border-radius: 50%;
        z-index: 3000;
      }
      .p-box-paper {
        text-align: center;
        padding: 350px 0 0 0;
        color: #fee77f;
        font-size: 120px;
        i {
          font-size: 36px;
          font-style: normal;
        }
      }
      .p-box-term {
        text-align: center;
        padding: 120px 0 0 0;
        color: #fee77f;
        font-size: 24px;
        line-height: 40px;
      }
      .p-box-btn {
        width: 415px;
        height: 90px;
        background: #fff;
        opacity: 0;
        margin: 30px auto 0;
        border-radius: 10px;
      }
    }
  }
}

.mint-msgbox-wrapper {
  // left: 0;
  // top: 0;
  // right: 0;
  // bottom: 0;

  .mint-msgbox {
    width: 100%;
    height: 600px;
    background: url("../../public/imgs/bonus/img-bonus-dialog.png") center 0
      no-repeat;
    background-size: 750px 600px;
    border-radius: 10px;
    padding: 200px 170px 0;
    box-sizing: border-box;

    .mint-msgbox-content {
      margin-bottom: 40px;
      border: none;
      .mint-msgbox-message {
        height: 150px;
        line-height: 160px;
        font-size: 28px;
        font-size: 0;
        line-height: 0;
      }
    }
    .mint-msgbox-btns {
      height: 80px;
      font-size: 28px;
      .mint-msgbox-cancel {
        position: absolute;
        right: 130px;
        top: 145px;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: transparent;
        opacity: 0;
      }
      & > button {
        font-size: 0;
        line-height: 0;
        background: transparent;
      }
    }
  }
}
</style>
